<template>
  <!-- 抖音热榜 -->
  <div class="dydr">
    <!-- 热搜榜 -->
    <div class="query">
      <my-button
        v-for="(item, index) in tabList"
        :key="index"
        :bgc="item.bgc"
        @click="handleClickTab(item)"
      >
        {{ item.label }}
      </my-button>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="tip">
          显示抖音内时事热点词榜，每2小时更新一次，用户可参看热搜词上传相关视频，达到更好的优化效果！
        </div>
        <div class="list-refresh">
          <my-dropdown-list
            :list="tableColumn"
            @change="changeTableColumn"
          ></my-dropdown-list>
          <div class="iconfont icon" @click="refresh">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div v-if="selectedTab.index == 0" class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <el-table-column
            v-if="tableColumn.index.show"
            prop="index"
            label="序号"
            width="100"
            class-name="column-class-name"
            :formatter="columnFormat"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.hot_level.show"
            prop="hot_level"
            label="热度"
            min-width="200"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.sentence.show"
            prop="sentence"
            label="热点词"
            min-width="300"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-if="selectedTab.index == 1" class="table">
        <el-table
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <el-table-column
            v-if="tableColumn.index.show"
            prop="index"
            label="序号"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.hot_level.show"
            prop="hot_level"
            label="热度"
            min-width="200"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.label_new.show"
            prop="label_new"
            label="标签"
            width="150"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <my-button v-if="scope.row.label_new == '热'" bgc="#EE0100"
                  > {{ scope.row.label_new }}</my-button
                >
                <my-button v-if="scope.row.label_new == '首发'" bgc="#FE7040">{{
                  scope.row.label_new
                }}</my-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.sentence.show"
            prop="sentence"
            label="热点词"
            min-width="300"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-if="selectedTab.index == 2" class="table">
        <el-table
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <el-table-column
            v-if="tableColumn.rank.show"
            prop="rank"
            label="排名"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.rank_change_new.show"
            prop="rank_change_new"
            label="变化"
            width="150"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <div v-if="scope.row.rank_change_new == '-'">
                  {{ scope.row.rank_change_new }}
                </div>
                <div v-if="scope.row.rank_change_new >= '0'" class="positive">
                  {{ scope.row.rank_change_new }}
                </div>
                <div v-if="scope.row.rank_change_new < '0'" class="negative">
                  {{ scope.row.rank_change_new }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.title.show"
            prop="title"
            label="话题"
            min-width="200"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.effect_value.show"
            prop="effect_value"
            label="影响力指数"
            min-width="300"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-if="selectedTab.index == 3" class="table">
        <el-table
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <el-table-column
            v-if="tableColumn.rank.show"
            prop="rank"
            label="排名"
            min-width="80"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.item_cover_new.show"
            prop="item_cover_new"
            label="视频"
            width="100"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <img
                  :src="scope.row.item_cover_new"
                  alt=""
                  style="cursor: pointer"
                  @click="jump(scope.row)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.title.show"
            prop="title"
            label="标题"
            min-width="350"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.hot_words.show"
            prop="hot_words"
            label="热词"
            min-width="300"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.author.show"
            prop="author"
            label="作者"
            width="100"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.play_count.show"
            prop="play_count"
            label="播放"
            width="100"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.digg_count.show"
            prop="digg_count"
            label="点赞"
            width="100"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.comment_count.show"
            prop="comment_count"
            label="评论"
            width="100"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.hot_value.show"
            prop="hot_value"
            label="热度指数"
            width="100"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-if="selectedTab.index == 4" class="table">
        <el-table
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <el-table-column
            v-if="tableColumn.rank.show"
            prop="rank"
            label="排名"
            min-width="100"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.nick_name.show"
            prop="nick_name"
            label="账号"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.unique_id.show"
            prop="unique_id"
            label="抖音号"
            min-width="300"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.follower.show"
            prop="follower"
            label="粉丝数"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.score.show"
            prop="score"
            label="热榜指数"
            min-width="150"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myForm from "@/components/myForm.vue";
import mySwitch from "@/components/mySwitch.vue";
import myInput from "@/components/myInput.vue";
import myDropdownList from "@/components/myDropdownList.vue";
import mySearchInput from "@/components/mySearchInput.vue";
import MyButton from "../../components/myButton.vue";
import data from "@/data/dyrb.js";
export default {
  components: {
    myButton,
    myForm,
    mySwitch,
    myInput,
    myDropdownList,
    mySearchInput,
    MyButton,
  },
  data() {
    return {
      newpage: {},
      tabList: data.tabList,
      type: "",
      dataSource: [],
      selectedTab: data.tabList[0],
      tableColumn: {
        index: {
          show: true,
          text: "序号",
        },
        hot_level: {
          show: true,
          text: "热度",
        },

        sentence: {
          show: true,
          text: "热点词",
        },
      },
      tableHeight: 0,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      platform: [
        { name: "头条（登录授权）", url: "" },
        { name: "抖音（登录授权）", url: "" },
        { name: "西瓜（登录授权）", url: "" },
        { name: "快手（登录授权）", url: "" },
        { name: "好看视频", url: "" },
      ],
      timer: null,
    };
  },
  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight;
      }, 500);
    };
    this.getData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    //列表
    async getData() {
      let res = await this.$api.dyrb_getData({
        page: this.currentPage,
        limit: this.pageSize,
        type: this.selectedTab.type,
      });
      res.data.forEach((item, index) => {
        item.index = index + 1;
      });
      this.dataSource = res.data;
    },
    refresh() {
      this.dataSource = [];
      this.getData();
    },
    columnFormat(row, column, cellValue, index) {
      let columns = document.querySelectorAll(`.${column.className}`);
      columns.forEach((item, index) => {
        if (index < 4) {
          item.style.color = "#387CF7";
        }
      });
      if (row.index <= 3) {
        return `#${row.index}`;
      } else {
        return row.index;
      }
    },
    // 修改状态
    changeSwitchValue() {},
    // 控制表格显示哪几列
    changeTableColumn(key) {
      console.log(key, "key");
      this.tableColumn[key].show = !this.tableColumn[key].show;
    },
    // 页码跳转
    jump(row) {
      this.newpage = row;
      window.open(this.newpage.share_url);
    },
    search() {},
    // 确认
    confirm() {},
    // 重置
    reset() {},
    handleClickTab(item) {
      this.selectedTab = item;
      this.tableColumn = data.column[item.index];
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.dydr {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 112px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 15px 45px;
  box-sizing: border-box;
  background-color: #fff;
  /deep/.button {
    width: auto;
    height: 30px;
    padding: 0 13px;
    margin-right: 14px;
  }
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 65px 0 20px 0;
  box-sizing: border-box;
  background-color: #fff;
  .action {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 65px;
    padding: 0 40px;
    box-sizing: border-box;
    .tip {
      color: rgb(197, 194, 194);
    }
    .list-refresh {
      position: absolute;
      bottom: 12px;
      right: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 60px;
      .icon {
        font-size: 17px;
        color: rgba(212, 212, 212);
        cursor: pointer;
        user-select: none;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    // /deep/ .column-class-name {
    //   font-weight: bold;
    // }
    /deep/ .header-row-class-name {
      height: 65px;
      th {
        background-color: #f0f4ff;
      }
      .cell {
        color: #333;
        text-align: center;
      }
    }
    /deep/ .row-class-name {
      height: 50px;
      .cell {
        display: flex;
        justify-content: center;
        text-align: center;
        .slot-row {
          display: flex;
          align-items: center;
          justify-content: center;
          .positive {
            color: red;
          }
          .negative {
            color: green;
          }
          img {
            height: 80px;
          }
          .icon-block {
            display: flex;
            align-items: center;
            height: 18px;
            padding: 0 8px;
            border-right: 2px solid #c7c7c7;
            .icon {
              color: #333;
              font-size: 20px !important;
            }
            .number {
              color: #333;
              font-size: 16px;
            }
          }
          :last-child {
            border-right: 0;
          }
        }
        .button {
          width: 78px;
          height: 28px;
        }
      }
    }
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgb(230, 228, 228);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #fff;
      }
    }
  }
}
</style>